<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:include="owner/checkTasks::head"></head>
<body>

<!--<h1>Hello Spring Security</h1>-->
<!--<p>这个界面没有受保护，你可以进已被保护的界面.</p>-->


<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a th:replace="user/myTasks::navbar-brand"></a>
            <div id="sideNav" href="">
            <i class="fa fa-bars icon"></i>

            </div>
        </div>


        <ul th:replace="user/myTasks::navbar"></ul>
    </nav>
    <!--/. NAV TOP  -->
    <nav th:replace="user/myTasks::ltree"></nav>
    <!-- /. NAV SIDE  -->

    <div id="page-wrapper">
        <div class="header">

                <h1 class="page-header">
                    项目管理
                    <small>项目维护.</small>
                </h1>
                <ol class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li class="active">项目管理</li>
                </ol>





        </div>

        <div th:replace="user/myTasks::editPasswd"></div>
        <div id="page-inner">
            <div class="row">
            <div class="row edit" style="display:none">
                <div class="col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="card-title">
                                <div class="title">详情</div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <form  id="myform"  th:action="@{/project/save/}" th:object="${taskModel.projectInfo}" method="post">
                                <!--<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>-->
                                <input type="hidden"   name="projectId" id="projectId" >
                                <div class="form-group col-xs-6">
                                    <label for="projectName">项目名称</label>
                                    <input type="text"  class="form-control"  name="projectName" id="projectName" >
                                </div>
                                <div class="form-group col-xs-6">
                                    <label for="owner">组长</label>
                                    <select class="selectbox" id="owner" name="owner" class="form-control">
                                        <option th:each="st: ${taskModel.owners}" th:value="${st.id}"text
                                                th:text="${st.cname}"></option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-10 col-sm-2">
                                        <button class="form-control btn btn-default save">保存</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <!--    Bordered Table  -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        服务器列表
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-sm-offset-9 col-sm-2">
                                <button class="form-control btn btn-default add">新增</button>
                            </div>
                        </div>
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover" id="dataTables-example"
                                   cellspacing="0" width="100%">
                                <!--<table class="display" id="dataTables-example"  cellspacing="0" width="100%">-->
                                <thead>
                                <tr>
                                    <th width="1%">#</th>
                                    <th width="7%">项目名称</th>
                                    <th width="9%">组长</th>
                                    <th width="8%">操作</th>
                                </tr>
                                </thead>


                            </table>
                        </div>
                    </div>
                </div>
                <!--  End  Bordered Table  -->
            </div>
                <foot class="text-center" th:include="user/myTasks::copyright"></foot>
        </div>



    </div>
    </div>
    <!-- /. PAGE INNER  -->
</div>
<div th:replace="owner/checkTasks::js1"></div>
<script type="text/javascript" th:inline="javascript">
    $(function () {
        var t = $('#dataTables-example').dataTable(
            {
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.16/i18n/Chinese.json'
                },
                autoWidth: false,  //禁用自动调整列宽
                stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
                processing: true,  //隐藏加载提示,自行处理
                serverSide: true,  //启用服务器端分页
                searching: false,  //禁用原生搜索
                orderMulti: false,  //启用多列排序
                order: [],  //取消默认排序查询,否则复选框一列会出现小箭头
                renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
                pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
                createdRow: function (row, data, index) {
                    var i = t.page() * t.page.len() + index + 1;
                    $('td:eq(0)', row).html("<span class='row-details row-details-close' ></span>&nbsp;" + i);
                    $(row).attr("data_id", data["projectId"]);
                },
                columnDefs: [{
                    "targets": 'nosort',  //列的样式名
                    "orderable": false,  //包含上样式名‘nosort’的禁止排序
                    "searchable": false
                },

                    {
                        "targets": 3,//按钮目标列
                        "data": null,
                        "render": function (data, type, row) {
                            debugger;
//                            var id = '"' + row.id + '"';
                            var html = "";
                            html += "<a href='javascript:void(0);' onclick='edit(" + data.projectId + ")'   class='btn btn-primary check'><i class='fa fa-pencil-square-o'></i> 修改</a>"
                            html += "<a href='javascript:void(0);' onclick='editServer(" + data.projectId + ")'   class='btn btn-primary'><i class='fa fa-align-right'></i> 服务器</a>"
                            return html;
                        }
                    }],

                ajax: function (data, callback, settings) {
                    //封装请求参数
                    var param = {};
                    param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                    param.start = data.start;//开始的记录序号
                    param.page = (data.start / data.length) + 1;//当前页码;
                    //ajax请求数据
                    $.ajax({
                        type: "GET",
                        url: "/project/query",
                        cache: false,  //禁用缓存
                        data: param,  //传入组装的参数
                        dataType: "json",
                        success: function (result) {
                            console.log("result" + result);
                            //setTimeout仅为测试延迟效果
                            setTimeout(function () {
                                //封装返回数据
                                var returnData = {};
                                returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                returnData.recordsTotal = result.totalElements;//返回数据全部记录
                                returnData.recordsFiltered = result.totalElements;//后台不实现过滤功能，每次查询均视作全部结果
                                returnData.data = result.content;//返回的数据列表
//                                console.log(returnData);
                                //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                                //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                                callback(returnData);
                            }, 200);
                        }
                    });
                },
                //列表表头字段
                columns: [
                    {"data": "", "defaultContent": ""},
                    {"data": "projectName", "defaultContent": ""},
                    {"data": "user.cname", "defaultContent": ""}
                ]

            }).api();

        $(".add").click(function () {
            document.getElementById("myform").reset();
            $(".edit").show();
        });

        $(".save").click(function () {
            alert("form");
            $("form").submit();
        })
    })
    function edit(id){
        $(".edit").show();
        $.get("/project/one/"+id, function (d) {
            $("#projectName").val(d.projectName);
            $("#projectId").val(d.projectId);
            $("#owner").val(d.user.id);
        });
    }
    function editServer(id) {
        window.location.href = "/server/"+id;
    }

</script>
<div th:replace="owner/checkTasks::js2"></div>


</body>
</html>
